<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!doctype html>
<html class="no-js">
<head>
    <%@ include file="./../common/meta.jsp" %>
    <link rel="stylesheet" href="../../css/echu.css">
    <style>
        .head-wrap {
            margin: 30px auto 10px;
            width: 83px;
            height: 86px;
            background: url('../../img/head-bg.png') no-repeat;
            background-size: 100% auto;
            padding: 1px 0 0;
        }

        .head-wrap img {
            margin: 0 auto;
            width: 70px;
            height: 70px;
            display: block;
        }
    </style>
</head>
<body>
<header data-am-sticky class="am-header am-header-default am-no-layout">
    <div class="am-header-left am-header-nav">
        <a href="../../app/index.jsp" class="">

            <i class="am-header-icon am-icon-home"></i>
        </a>
    </div>
    <h1 class="am-header-title"></h1>
    <div class="am-header-right am-header-nav">
        <a href="../../app/login/login.jsp" class="">
              <span class="am-header-nav-title">
                登录
              </span>
        </a>
    </div>
</header>
<div class="am-content">

    <div class="am-container am-margin-top-lg">
        <div class="am-g">
            <div class="am-u-sm-12">
                <form method="post" class="am-form am-form-horizontal" id="login-form">
                    <div class="am-form-group">
                        <div class="am-g">
                            <div class="head-wrap">
                                <img id="head" class="am-circle user-img" src="" />
                            </div>
                            <p class="tc" id="userName">

                                <label class="am-radio-inline">
                                    <input type="radio" name="sex" value="1" data-am-ucheck> 凤后
                                </label>

                                <label class="am-radio-inline">
                                    <input type="radio" name="sex" value="2" data-am-ucheck> 龙皇
                                </label>

                            </p>
                        </div>
                    </div>
                    <div class="am-form-group">
                        <div class="am-u-sm-12">
                            <div class="am-form-icon">
                                <input type="text" name="account"
                                       id="account"
                                       class=""
                                       placeholder="输入您的手机号">
                            </div>
                        </div>
                    </div>

                    <div class="am-form-group">
                        <div class="am-u-sm-12">
                            <div class="am-form-icon">
                                <input type="text" name="nickname"
                                       id="nickname"
                                       class=""
                                       placeholder="输入您的昵称">
                            </div>
                        </div>
                    </div>

                    <div class="am-form-group">
                        <div class="am-u-sm-12">
                            <div class="am-form-icon">
                                <input type="password" name="password"
                                       id="password" class=""
                                       placeholder="输入6-20位密码"></div>
                        </div>
                    </div>
                    <div class="am-form-group">
                        <div class="am-u-sm-12">
                            <div class="am-form-icon">
                                <input type="password" name="password-confirm"
                                       id="password-confirm" class=""
                                       placeholder="输入确认密码"></div>
                        </div>
                    </div>
                    <div class="am-form-group">
                        <div class="am-u-sm-12">
                            <div class="am-form-icon">
                                <input type="text" class="" placeholder="出生日期" data-am-datepicker readonly required
                                       id="birthday"/>
                            </div>
                        </div>
                    </div>
                    <div class="am-form-group">
                        <div class="am-u-sm-12">
                            <div class="am-form-icon">
                                <input type="text" name="address"
                                       id="address"
                                       class=""
                                       placeholder="输入地址">
                            </div>
                        </div>
                    </div>

                    <div class="am-form-group">
                        <div class="am-u-sm-12">
                            <div class="am-form-icon">
                                <input type="text" name="address"
                                       id="inviteCode"
                                       class=""
                                       placeholder="输入您的邀请码">
                            </div>
                        </div>
                    </div>


                    <div class="am-form-group">
                        <div class="am-u-sm-12">
                            <div class="am-form-icon">
                                <img src="" id="userModal" style="width: 100px;height: 100px">
                                <input type="hidden" name="superModal" id="modal">
                            </div>
                        </div>
                    </div>


                    <div class="am-form-group">
                        <div class="am-u-sm-12">
                            <div class="am-form-icon">
                                <button type="button" class="selectModal" data-am-modal="{target: '#my-alert'}">
                                    选择模特
                                </button>

                            </div>
                        </div>
                    </div>


                    <div class="am-form-group am-margin-bottom-sm">
                        <div class="am-u-sm-12">
                            <input type="button"
                                   id="regsubmit"
                                   value="注  册"
                                   class="am-btn-block am-btn am-btn-primary am-btn-sm">
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>


<div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">选模特</div>
        <div class="am-modal-bd">
            <ul class="sel-mt" id="superModal">
            </ul>
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn" id="modalSelect">确定</span>
            <span class="am-modal-btn">取消</span>
        </div>
    </div>
</div>


<div class="am-modal am-modal-alert" tabindex="-1" id="modal-alert">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">提示</div>
        <div class="am-modal-bd"></div>
        <div class="am-modal-footer">
            <span class="am-modal-btn">确定</span>
        </div>
    </div>
</div>


<script id="super-template" type="text/x-handlebars-template">
    {{#each this}}
    <li class="am-g">
        <label class="am-radio-inline">
            <input type="radio" name="superInput" class="service" value="{{id}}" data="{{imageurl}}"
                   data1="{{relativeUrl}}">
            <img src="{{imageurl}}" alt="..." class="am-img-thumbnail" data="{{id}}">
        </label>
    </li>
    {{/each}}
</script>
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="<%=ctx%>/shop/lib/assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->

<script src="<%=ctx%>/shop/lib/assets/js/jquery.min.js"></script>
<%--<script src="<%=ctx%>/shop/lib/assets/js/amazeui.min.js?v=1"></script>--%>
<script src="<%=ctx%>/shop/lib/assets/js/handlebars.min.js"></script>
<script src="<%=ctx%>/shop/lib/assets/js/amazeui.widgets.helper.js"></script>
<script src="<%=ctx%>/shop/lib/assets/js/drag.js"></script>


<script>
    $(function () {


        $(".selectModal").click(function () {
            var sex = $("input[name=sex]:checked").val();
            if (sex == null || sex == "" || typeof(sex) == "undefined") {
                alert("请选择性别");
                return false;
            }
            var superModal = "/h5/getSuperModal";
            $.post(superModal, {
                sex: sex
            }, function (result) {
                var source = $('#super-template').html();
                var template = Handlebars.compile(source);
                var html = template(result);
                $("#superModal").append(html);

            });
        })

        $("#modalSelect").click(function () {
            var selectId = $("input[name=superInput]:checked").attr("data");
            var relativeUrl = $("input[name=superInput]:checked").attr("data1");
            if (selectId == "" || selectId == null) {
                alert("请选择与您相配的模特");
                return false;
            }
            $("#userModal").attr("src", selectId);
            $("#modal").val(relativeUrl);
            $("#my-alert").modal("hide");


        })

    })


</script>


<%--<%@ include file="./../common/footerNav.jsp" %>--%>

<script src="../../js/login/register.js"></script>
</body>
</html>